<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="650px"
    @close="close"
  >
    <el-form
      ref="form"
      :inline="true"
      label-width="80px"
      :model="form"
      :rules="rules"
    >
      <el-form-item label="分组" prop="group_id">
        <el-select v-model="form.group_id" placeholder="请选择">
          <el-option
            v-for="item in group"
            :key="item.id"
            :label="item.group_name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="楼栋名字" prop="building_name">
        <el-input
          v-model.trim="form.building_name"
          placeholder="请输入楼栋名字"
        />
      </el-form-item>
      <el-form-item label="楼栋地址" prop="building_address">
        <el-input
          v-model.trim="form.building_address"
          placeholder="请输入楼栋地址"
        />
      </el-form-item>
      <el-form-item label="总层数" prop="floor_total">
        <el-select
          v-model="form.floor_total"
          placeholder="请选择"
          @change="floorsChange"
        >
          <el-option
            v-for="item in 99"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="每层房间数" prop="number">
        <el-select
          v-model="form.number"
          placeholder="请选择"
          @change="setFloorRooms"
        >
          <el-option
            v-for="item in 99"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="房间号前缀" prop="pre">
        <el-input
          v-model.trim="form.pre"
          maxlength="1"
          placeholder="请输入1位数字/字母"
          @input="preChange"
        />
      </el-form-item>
      <div class="floorList">
        <div v-for="(itm, idx) in form.floor_rooms" :key="idx" class="floorBox">
          <div
            v-if="form.floor_rooms.length > 1"
            class="delete"
            @click="deleteFloor(idx)"
          >
            <vab-icon icon="delete-bin-2-line" />
          </div>
          <el-form-item label="所在楼层">
            <el-select
              v-model="itm.floor_no"
              placeholder="请选择"
              size="mini"
              @change="
                (value) => {
                  floorChange(value, idx)
                }
              "
            >
              <el-option
                v-for="item in 99"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="房间数">
            <el-select
              v-model="itm.room_total"
              placeholder="请选择"
              size="mini"
              @change="
                (value) => {
                  numberChange(value, idx)
                }
              "
            >
              <el-option
                v-for="item in 99"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <div class="rooms">{{ itm.rooms_no }}</div>
        </div>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { getgroup } from '@/api/group'
  import { addBuild } from '@/api/room'
  export default {
    name: 'AddBuild',
    data() {
      return {
        form: {
          group_id: '',
          building_name: '',
          floor_total: 1,
          number: 1,
          pre: '',
          floor_rooms: [{ floor_no: 1, room_total: 1, rooms_no: '101' }],
          floor_rooms_data: '',
        },

        rules: {
          group_id: [
            { required: true, trigger: 'blur', message: '请选择分组' },
          ],
          building_name: [
            { required: true, trigger: 'blur', message: '请输入楼栋名字' },
          ],
        },
        title: '添加整栋',
        dialogFormVisible: false,
        group: [],
      }
    },
    methods: {
      showEdit() {
        this.dialogFormVisible = true
        this.fetchData()
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            var roomData = this.form.floor_rooms
            var floorArr = []
            for (let i = 0; i < roomData.length; i++) {
              floorArr.push(roomData[i].floor_no)
            }
            if (new Set(floorArr).size !== floorArr.length) {
              this.$baseMessage(
                '楼层不能重复',
                'error',
                'vab-hey-message-error'
              )
            } else {
              this.form.floor_rooms_data = JSON.stringify(roomData)
              this.goAddBuild(this.form)
            }
          }
        })
      },
      async goAddBuild(form) {
        const { data } = await addBuild(form)
        if (data.is_success) {
          this.$baseMessage('添加成功', 'success', 'vab-hey-message-success')
          this.$emit('fetch-data')
          this.close()
        }
      },
      async fetchData() {
        const { data } = await getgroup({})
        this.group = data
      },
      floorChange(num, id) {
        var rooms = []
        for (let j = 0; j < this.form.floor_rooms[id].room_total; j++) {
          var two = this.addZero(j)
          var roomsone = this.form.pre + num + two
          rooms.push(roomsone)
        }
        this.form.floor_rooms[id].rooms_no = rooms.join(',')
      },
      numberChange(num, id) {
        var rooms = []
        for (let j = 0; j < num; j++) {
          var two = this.addZero(j)
          var roomsone =
            this.form.pre + this.form.floor_rooms[id].floor_no + two
          rooms.push(roomsone)
        }
        this.form.floor_rooms[id].rooms_no = rooms.join(',')
      },
      floorsChange(num) {
        var date = this.form.floor_rooms
        var lengths = this.form.floor_rooms.length
        var newNum = num - lengths
        if (lengths > num) {
          // 减少
          this.form.floor_rooms = date.slice(0, newNum)
        } else {
          // 增加
          for (let i = lengths; i < this.form.floor_total; i++) {
            var base = {
              floor_no: i + 1,
              room_total: this.form.number,
            }
            var rooms = []
            for (let j = 0; j < base.room_total; j++) {
              var two = this.addZero(j)
              var roomsone = this.form.pre + base.floor_no + two
              rooms.push(roomsone)
            }
            base.rooms_no = rooms.join(',')
            date.push(base)
          }
        }
      },
      preChange() {
        var oldDate = this.form.floor_rooms
        for (let i = 0; i < oldDate.length; i++) {
          var oldDetail = oldDate[i].rooms_no
          var oldDetailArr = oldDetail.split(',')
          var rooms = []
          for (let j = 0; j < oldDetailArr.length; j++) {
            var two = this.addZero(j)
            var roomsone = this.form.pre + oldDate[i].floor_no + two
            rooms.push(roomsone)
          }
          oldDate[i].rooms_no = rooms.join(',')
        }
        this.form.floor_rooms = oldDate
      },
      setFloorRooms() {
        var date = []
        for (let i = 0; i < this.form.floor_total; i++) {
          var base = {
            floor_no: i + 1,
            room_total: this.form.number,
          }
          var rooms = []
          for (let j = 0; j < base.room_total; j++) {
            var two = this.addZero(j)
            var roomsone = this.form.pre + base.floor_no + two
            rooms.push(roomsone)
          }
          base.rooms_no = rooms.join(',')
          date.push(base)
        }
        this.form.floor_rooms = date
      },
      deleteFloor(num) {
        this.form.floor_rooms.splice(num, 1)
      },
      addZero(num) {
        return String(num + 1).padStart(2, 0)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .el-input--small {
    width: 215px;
  }
  .floorList {
    max-height: 300px;
    overflow: scroll;
    .floorBox {
      padding: 10px;
      background: #f0f7ff;
      border-radius: 10px;
      margin-bottom: 10px;
      position: relative;
      ::v-deep .el-form-item--small .el-form-item__content {
        width: 180px;
        min-width: 180px;
      }
      .delete {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #ee5959;
        cursor: pointer;
        width: 32px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .rooms {
        width: 100%;
        height: 32px;
        line-height: 32px;
        padding: 0 10px;
        border-radius: 2px;
        color: rgba(0, 0, 0, 0.25);
        background: #f5f5f5;
        border: 1px solid #d9d9d9;
        cursor: not-allowed;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
</style>
